<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item>
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>服务</span>
        <template #icon="props">
          <img :src="props.active ? serveIcon.active : serveIcon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>消息</span>
        <template #icon="props">
          <img :src="props.active ? msgIcon.active : msgIcon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? myIcon.active : myIcon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default{
    name: 'Footer',
    data(){
      return {
        active: 0,
        homeIcon: {
          active: require('@/assets/images/footer/icon_hone_sel.png'),
          inactive: require('@/assets/images/footer/icon_hone_default.png'),
        },
        serveIcon: {
          active: require('@/assets/images/footer/icon_service_sel.png'),
          inactive: require('@/assets/images/footer/icon_service_default.png'),
        },
        msgIcon: {
          active: require('@/assets/images/footer/icon_message_sel.png'),
          inactive: require('@/assets/images/footer/icon_message_default.png'),
        },
        myIcon: {
          active: require('@/assets/images/footer/icon_personal_sel.png'),
          inactive: require('@/assets/images/footer/icon_personal_default.png'),
        },
      }
    }
  }
</script>

<style>
</style>
